<template>
  <div>
    <el-dialog title="添加字典" :visible.sync="buttontype" @close="fun(tname)">
      <div>
        {{ form }}
        <el-form ref="form" :model="form" label-width="80px">
          <!-- 字典名称 -->
          <el-form-item label="字典名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <div v-if="status.length !== 0">
            <div style="margin-left: 10px">字典详情</div>
            <el-row :gutter="20" v-for="(i, $index) in status" :key="$index">
              <el-col :span="10">
                <el-form-item label="状态码">
                  <el-input v-model="status[$index].status"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="含义">
                  <el-input v-model="status[$index].content"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="danger" @click="status.splice($index, 1)"
                  >移除</el-button
                >
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addstatus">添加字典详情</el-button>
        <el-button type="primary" @click="upuser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { http, dict } from "../../api/api";
export default {
  props: ["type", "fun", "tname", "tablerow"],
  data() {
    return {
      buttontype: this.type, //模态框状态
      formtype: {
        //数据
        name: "", //字典名称
      },
      status: [],
      form: "",
    };
  },
  methods: {
    // 添加字典详情
    addstatus() {
      this.status.push({ status: "", content: "" });
    },
    // 编码字符串
    statusDis(data) {
      var tel = "";
      for (var i = 0; i < data.length; i++) {
        tel += data[i].status + ":" + data[i].content + ";";
      }
      return tel;
    },
    // 解析字符串
    statusParse(data) {
      var arr = data.split(",");
      for (var i = 0; i < arr.length; i++) {
        var arrnow = arr[i].split(":");
        this.status.push({ status: arrnow[0], content: arrnow[1] });
      }
    },
    upuser() {
      //  添加用户
      var type = true;
      for (var i in this.formtype) {
        if (this.form[i] === "") {
          type = false;
        }
      }
      if (type) {
        var statusdis = this.statusDis(this.status);
        this.$http
          .put(
            http +
              dict +
              `?dictName=${this.form.name}&dictValues=${statusdis}&id=${this.form.id}`,
            { emulateJSON: true }
          )
          .then(
            (data) => {
              if (data.data.msg == "成功") {
                this.buttontype = false;
                this.$message.success("字典修改成功");
              }
            },
            (error) => {
              this.$message({
                showClose: true,
                message: error.data.message,
                type: "error",
                center: true,
              });
            }
          );
      } else {
        this.$message.error("请补全信息");
      }
    },
  },
  watch: {
    type() {
      this.buttontype = this.type;
    },
    tablerow() {
      if (this.tablerow) {
        this.statusParse(this.tablerow.detail);
      } else {
        this.status = [];
      }
      // 浅拷贝变深拷贝
      var json = {};
      for (var i in this.tablerow) {
        this.$set(json, i, this.tablerow[i].toString());
      }
      this.form = json;
      console.log(this.form);
    },
  },
};
</script>

<style>
</style>